<template>
  <div>
   <div>
      <!-- 群头像 -->
      <div style="">
      <img :src="$imageUrl+GroupList.groupImgId"
        style="width: 70px; height:70px;border-radius:50%"/>
        <p class="h"></p>
      </div>
       <div>
        <span style="font-size:18px;line-height:30px;">群号码：</span>
        <span style="font-size:18px;color:black">{{GroupList.groupNum}}</span>
       </div>
       <div>
        <span style="font-size:18px;line-height:30px;">群昵称：</span>
        <span style="font-size:18px;color:black">{{GroupList.groupName}}</span>
        <!-- <el-input style="width:200px;margin-left:-10px" v-model="GroupList.groupName"></el-input> -->
       </div>
       <div>
        <span style="font-size:18px;line-height:30px;">群病种：</span>
        <span style="font-size:18px;color:black">{{GroupList.dictLabel}}</span>
       </div>

       <img :src="$imageUrl +2806" style="width:40px;height:40px;float: right;margin-top:-190px" @click="update(GroupList)"/>

       <el-dialog title="修改数据" :visible.sync="updateMessage" width="30%">
        <el-form :model="GroupFrom"  ref="GroupFrom" label-width="100px" class="demo-GroupFrom">
        <el-form-item label="群聊头像">
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img style="width:50px;height:50px;border-radius:50px" v-if="imageUrl" :src="imageUrl">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
          <el-form-item label="群聊名称" prop="groupName">
            <el-input v-model="GroupFrom.groupName"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateMessage=false">取 消</el-button>
          <el-button type="primary" @click="updateGroup()">确 定</el-button>
        </div>
       </el-dialog>
   </div>
  </div>
</template>

<script>
export default {
  props: {
    // 从父组件里接受过来的群聊信息
    GroupList: Object
  },
  data () {
    return {
      GroupFrom: {
        groupImgId: 0,
        groupName: ''
      },
      imageUrl: '',
      imageFile: File,
      updateMessage: false

    }
  },
  mounted () {
  },
  methods: {
    update (GroupList) {
      setTimeout(() => {
        document.getElementsByClassName('v-modal')[0].style = 'zIndex:200'
      }, 100)
      // 打开修改弹窗
      this.GroupFrom = JSON.parse(JSON.stringify(GroupList)) // 回显
      this.updateMessage = true
      this.imageUrl =
        this.$imageUrl + GroupList.groupImgId // 在修改上显示图片
    },
    // 上传图片
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      this.imageUrl = URL.createObjectURL(file)
      this.imageFile = file
      return false
    },
    updateGroup () {
      // 修改房源信息
      const form = new FormData()
      form.set('id', this.GroupFrom.id)
      // form.set("groupImgId", this.GroupFrom.groupImgId);
      form.set('groupName', this.GroupFrom.groupName)
      // 图片修改
      if (this.imageFile.name !== 'File') {
        form.set('file', this.imageFile, this.imageFile.name)
      }
      this.$axios.put('/group/updateGroup', form)
        .then((res) => {
          if (res.data.flag) {
            this.updateMessage = false
            location.reload()
            this.myMessage('success', '修改成功')
          } else {
            this.myMessage('warning', '修改失败！')
          }
        })
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style>
.h {
width: 320px;
border-bottom: 1px solid #ECECEC;
margin-top: 15px;
        margin-left: -20px;
        margin-bottom: 10px;
}
</style>
